<template>
    <view class="auth">
        <up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
            <view class="form_part">
                <up-form-item label="企业关联码" prop="relateEntCode" border-bottom>
                    <up-input placeholder="请输入企业关联码" border="none" v-model="form.relateEntCode"></up-input>
                </up-form-item>
                <up-form-item label="当前手机号" prop="phone" border-bottom>
                    <up-input type="number" placeholder="请输入当前手机号" border="none" v-model="form.phone"></up-input>
                </up-form-item>
            </view>
            <view class="form_part">
                <ssection title="请上传本人有效身份证(必填)" line></ssection>
                <view class="file_box">
                    <view style="margin-right: 20px;">
                        <view class="image_part">
                            <image :src="image.certificateFrontPic" @click="uploadImage(0, 1, 'certificateFrontPic')">
                            </image>
                        </view>
                        <view class="file_title">身份证正面</view>
                    </view>
                    <view>
                        <view class="image_part">
                            <image :src="image.certificateBackPic" @click="uploadImage(0, 0, 'certificateBackPic')">
                            </image>
                        </view>
                        <view class="file_title">身份证反面</view>
                    </view>
                </view>
            </view>
            <view class="form_part">
                <ssection title="请确定委托人收款人信息" line></ssection>
                <up-form-item label="姓名" border-bottom prop="name">
                    <up-input border="none" v-model="form.name" placeholder="请上传身份证,系统自动识别"></up-input>
                </up-form-item>
                <up-form-item label="身份证号" border-bottom prop="idCard">
                    <up-input border="none" v-model="form.idCard" placeholder="请上传身份证,系统自动识别"></up-input>
                </up-form-item>
                <view class="form_button">
                    <up-button type="primary" @click="auth">认证</up-button>
                </view>
            </view>

        </up-form>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import certificateFrontPic from '@/static/images/mine/Portraitface.png'
import certificateBackPic from '@/static/images/mine/National.png'
import ssection from "@/components/ssection.vue"
import {
    chooseImage, uploadFiles
} from '@/api/file'
import { authentication } from '@/api/driver'

/* 数据 */
// 提示
const uToastRef = ref<any>(null)
const formRef = ref<UniFormRef | null>(null)
// 表单
const form = reactive({
    name: '',
    phone: '',
    idCard: '',
    relateEntCode: '',
    certificateFrontPic: '',
    certificateBackPic: ''
})
// 校验规则
const rules = reactive({
    relateEntCode: {
        type: 'string',
        required: true,
        message: '请填写企业关联码',
        trigger: ['blur', 'change']
    },
    phone: [{
        type: 'string',
        required: true,
        message: '请填写手机号',
        trigger: ['blur', 'change'],

    },
    {
        pattern: /(^1[3-9][0-9]{9}$)/g,
        message: '手机格式错误',
        trigger: ['blur', 'change']
    }],
    name: {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
    },
    idCard: [{
        type: 'string',
        required: true,
        message: '请填写身份证号',
        trigger: ['blur', 'change']
    },
    {
        pattern: /(^\d{15}$)|(^\d{17}[\dxX]$)/g,
        message: '请输入正确的身份证号',
        trigger: ['blur', 'change']
    }]
})
// 图片
const image = reactive({
    certificateFrontPic,
    certificateBackPic
})



/* 方法 */
// 上传图片
const uploadImage = async (licenseType: number, cardType: number, type: string) => {
    let img = await chooseImage()
    uToastRef.value.show({
        message: '正在上传...',
        type: 'loading',
        duration: -1
    })
    let res: any = await uploadFiles(img, {
        licenseType,
        cardType
    })
    uToastRef.value.hide()
    if (res.success) {
        image[type as keyof typeof image] = img
        form[type as keyof typeof form] = res.data.fileId
        let data = res.data.certificateInfo
        if (type === 'certificateFrontPic') {
            form.name = data.name
            form.idCard = data.iDNumber
        }
    }
}
// 认证
const auth = async () => {
    if (!form.certificateFrontPic || !form.certificateBackPic) {
        uToastRef.value.show({
            position: 'top',
            message: '请上传正，反面身份证',
            type: 'warning'
        })
        return
    }
    let valid = await formRef.value?.validate()
    if (valid) {
        uToastRef.value.show({
            message: '正在认证...',
            type: 'loading',
            duration: -1
        })
        let res = await authentication(form)
        uToastRef.value.hide()
        if (res.success) {
            uToastRef.value.show({
                position: 'top',
                message: '实名认证成功，两秒后跳转视频认证',
                type: 'success',
                complete() {
                    uni.navigateTo({
                        url: `/package_mine/pages/entrustedPayee/videoAuth?name=${form.name}&idCard=${form.idCard}`
                    })
                }
            })
        }
    }
}





</script>


<style lang="scss" scoped>
::v-deep .uni-section {
    .uni-section-header {
        padding: 12px 0px !important;
        font-weight: 700;
        font-size: 40px;
    }
}

.auth {
    .form_part {
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .form_button {
            margin-top: 15px;
        }

        .file_box {
            display: flex;
            padding: 0 10px;

            >view {
                flex: 1;
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }

                .image_part {
                    width: 100%;
                    aspect-ratio: 3 / 2;
                    border: 1px solid #ddd;
                    padding: 10px;
                    box-sizing: border-box;

                    >image {
                        width: inherit;
                        height: 100%;
                    }
                }

                .file_title {
                    padding: 15px 0 5px;
                    font-size: 14px;
                    text-align: center;
                }
            }
        }

        .low_tip {
            color: rgb(64, 117, 247);
        }
    }
}
</style>
